<template>
  <div class="container">
    <p>注册功能{{ states }}</p>
    <el-button type="primary" @click="openLogon">开启注册功能</el-button>
    <el-button type="danger" @click="closeLogon">关闭注册功能</el-button>
    <el-button type="success" @click="getPermission">获取秘钥</el-button>
    <div class="role_table">
      <el-table
        ref="list"
        :data="list"
        stripe
        style="width: 100%"
      >
        <el-table-column label="秘钥" prop="keys" align="center" width="220" />
        <el-table-column label="权限" prop="roles" align="center" width="220" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleCopy(scope.$index, scope.row)">复制秘钥</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { openLogon, closeLogon, getPermission } from '@/api/logon'

export default {
  data() {
    return {
      states: '',
      list: [],
      copyData: null
    }
  },
  methods: {

    // 开启注册
    openLogon() {
      openLogon().then(response => {
        if (response.resultCode === 200) {
          this.$message.success('开启注册成功')
        }
      })
      this.states = '开启'
    },

    // 关闭注册
    closeLogon() {
      closeLogon().then(response => {
        if (response.resultCode === 200) {
          this.$message.success('关闭注册成功')
        }
      })
      this.states = '关闭'
    },

    // //重置表单
    reset() {
      this.list = []
    },

    // 获取秘钥
    getPermission() {
      getPermission(this.data).then(response => {
        if (response.resultCode === 200) {
          var data = response.data
          this.reset()
          for (var i in data) {
            // console.log(data[i])
            // console.log(i)
            console.log(this.list)
            this.list.push({
              keys: i,
              roles: data[i]
            })
          }
        }
      })
    },

    // 复制秘钥
    handleCopy(index, row) {
      this.copyData = row.keys
      this.copy(this.copyData)
    },
    copy(data) {
      const url = data
      const oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select()
      console.log(oInput.value)
      document.execCommand('Copy')
      this.$message({
        message: '复制成功！',
        type: 'success'
      })
      oInput.remove()
    }
  }

}
</script>
